<template>
	<view class="page">
		<view class="fill" :style="'background: linear-gradient('+navBgColor+', #FBF8FE)'">
			<!-- <swiper class="mall_swiper" :autoplay="true" :circular="true">
				<swiper-item v-for="item in info.banner" @click="$navTo(item.link)">
					<image :src="item.thumb" class="bg"></image>
				</swiper-item>
			</swiper> -->
			<!-- <image src="https://img.jinghushi.com/images/9/2024/05/hRYEQy977Ze14Ef14JrZD1w9eTyWA9.png" mode="widthFix" class="bg"></image> -->
			<view class="f_position">
				<view class="flex_align_center">
					<view class="search flex_between" :style="'background:'+fixBg" :class="{'search_fixed':isFixed}" @click="$navTo('/pages/product/search')">
						<!-- <uni-search-bar radius="30" :readonly="true" bgColor="trans" v-model="keywords" placeholder="搜索您想要的商品" clearButton="auto" cancelButton="none" @confirm="searchTap" /> -->
						<image src="https://img.jinghushi.com/images/9/2024/12/VAiX3UU82x183nUv3883p8LJAWcW2w.png"></image>
						<view class="s_tit">搜索内容</view>
					</view>
					<view class="notice_bar">
						<image src="https://img.jinghushi.com/images/9/2024/12/G6PhECDHX6DmMoeenEe16biBHYnXOp.png" mode="widthFix"></image>
						<view class="no_bar">
							<!-- <uni-notice-bar :speed="30" scrollable :text="notice" backgroundColor="#f0e0fd" :showStyle="true" color="#8d21e2" /> -->
							<uni-notice-bar :speed="20" scrollable :text="notice" backgroundColor="transparent" :showStyle="true" color="#fff" />
						</view>
					</view>
				</view>
				<!-- 头部轮播 -->
				<!-- <jswiper :Jinfo="info.banner"></jswiper> -->
				<swiper class="Jc_swiper" :autoplay="true" :circular="true" :interval="5000" :indicator-dots="false" @change="changeNavBgColor">
					<swiper-item class="Jc_swiper_item" v-for="item in info.banner" @click="$navTo(item.link)">
						<image class="Jc_swiper_image" :src="item.thumb" mode="widthFix" />
					</swiper-item>
				</swiper>
				<!-- 分类 -->
				<view class="pack" v-if="meunList.length>0">
					<view class="pack_item" v-for="(item,index) in meunList" @click="$navTo(item.url)">
						<view class="pack_img">
							<image :src="item.thumb" role="img" mode="heightFix"></image>
						</view>
						<text class="pack_title">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="d_content">
			<!-- 秒杀商品列表 -->
			<!-- <jsale></jsale> -->
			<!-- <view class="notice_bar">
				<image src="/static/user/notice.png" mode="widthFix"></image>
				<view class="no_bar">
					<uni-notice-bar :speed="30" scrollable :text="notice" backgroundColor="#f0e0fd" :showStyle="true" color="#8d21e2" />
				</view>
			</view> -->
			<!-- 礼包专区 -->
			<view class="libao" v-if="libaoList.length>0">
				<view class="libao_top" @click="$navTo('/pages/user/vip')">
					<image src="https://img.jinghushi.com/images/9/2024/12/aBxPBWityzB1b33z3x3XhHtmbJ1jY1.png" mode="widthFix"></image>
					<view class="libao_tip">购买一单升级团长</view>
				</view>
				<scroll-view class="libao_list" scroll-x="true">
					<view class="libao_item" v-for="item in libaoList" @click.stop="$navTo('/pages/product/product?id='+item.id)">
						<image :src="item.thumb"></image>
						<view class="clamp">{{item.title}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="super flex_between" v-if="info.saleBanner!==undefined&&info.saleBanner.length>0">
				<block v-for="item in info.saleBanner">
					<image :src="item.thumb" v-if="item.mtype==0" :class="{'super_item1':item.colnum==1,'super_item2':item.colnum==2,'super_item3':item.colnum==3,'super_item4':item.colnum==4}" :mode="item.colnum==4?'widthFix':''" @click="$navTo(item.link)"></image>
					<view class="d_activity" v-if="item.mtype==1&&item.parentid==0">
						<image class="d_a_big" :src="item.thumb" @click="$navTo(item.link)"></image>
						<view class="d_a_little">
							<image :src="fitem.thumb" v-for="fitem in saleBannerFu" @click="$navTo(fitem.link)" v-if="fitem.parentid==item.id" :class="{'super_item_fu4':fitem.colnum==4,'super_item_fu3':fitem.colnum==3,'super_item_fu2':fitem.colnum==2,'super_item_fu1':fitem.colnum==1}"></image>
						</view>
					</view>
				</block>
			</view>
			<!-- <image style="width: 100%;" src="https://img.jinghushi.com/images/9/2024/11/az4RXUP6ZU66sPsb8x6pPZpZcrZexQ.png" mode="widthFix"></image> -->
			<view id="page_wp">
				<!-- <view class="cate" :class="{'nav_pos':isFixed}" :style="'background:'+fixBg">
					<scroll-view class="c_tag_list" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
						<view class="c_tag" v-for="(item,index) in cateList" :class="{'c_tag_active':currentId==item.id}" @click="changebigCate(item.id,index)">
							<view class="c_tag_name">{{item.name}}</view>
							<image v-show="currentId==item.id" src="/static/group/tit.png"></image>
						</view>
					</scroll-view>
				</view> -->
				<!-- <view class="screen">
					<view class="screen_item screen_item_active">销量领先</view>
					<view class="screen_item">折扣优惠</view>
				</view> -->
				<view class="cate cate_seckill" :class="{'nav_pos':isFixed}" :style="'background:'+fixBg">
					<view class="c_tag_list">
						<view class="c_tag" :class="{'c_tag_active':currSeck==1}" @click="changeSeck(1)">
							<!-- <image src="https://img.jinghushi.com/images/9/2024/11/mn1b0gCNJXB0Z01g41bgZBbBAJJXjo.png" v-show="currSeck==1"></image> -->
							<image src="https://img.jinghushi.com/images/9/2024/12/o93l9dHDJ08W0W88JcwKUDm9KLJ179.png" v-show="currSeck!=1"></image>
							<image src="https://img.jinghushi.com/images/9/2024/12/wnJ4mIT6W64MC4Nv4i9IZdxZmswmc9.png" v-show="currSeck==1"></image>
							<view class="c_tag_name">历史秒杀</view>
							<!-- <image src="https://img.jinghushi.com/images/9/2024/11/tL50MhfQqAm66ML3hY0e03HM2lj2MQ.png" v-show="currSeck==1"></image> -->
						</view>
						<view class="c_tag" :class="{'c_tag_active':currSeck==2}" @click="changeSeck(2)">
							<!-- <image src="https://img.jinghushi.com/images/9/2024/11/mn1b0gCNJXB0Z01g41bgZBbBAJJXjo.png" v-show="currSeck==2"></image> -->
							<image src="https://img.jinghushi.com/images/9/2024/12/IowqH909Gh9h9g8rysRHU9a2wS8VRU.png" v-show="currSeck!=2"></image>
							<image src="https://img.jinghushi.com/images/9/2024/12/mr7b1bHYVI966BrKzv74c491bRok4y.png" v-show="currSeck==2"></image>
							<view class="c_tag_name">今日秒杀</view>
							<!-- <image src="https://img.jinghushi.com/images/9/2024/11/tL50MhfQqAm66ML3hY0e03HM2lj2MQ.png" v-show="currSeck==2"></image> -->
						</view>
						<view class="c_tag" :class="{'c_tag_active':currSeck==3}" @click="changeSeck(3)">
							<!-- <image src="https://img.jinghushi.com/images/9/2024/11/mn1b0gCNJXB0Z01g41bgZBbBAJJXjo.png" v-show="currSeck==3"></image> -->
							<image src="https://img.jinghushi.com/images/9/2024/12/qyOmE1YOt00MX4JwWt1TeXmZm5SMtw.png" v-show="currSeck!=3"></image>
							<image src="https://img.jinghushi.com/images/9/2024/12/FB9Bwfm8X1Nwb4B1Sfw4gZzxzse4Bb.png" v-show="currSeck==3"></image>
							<view class="c_tag_name">秒杀预告</view>
							<!-- <image src="https://img.jinghushi.com/images/9/2024/11/tL50MhfQqAm66ML3hY0e03HM2lj2MQ.png" v-show="currSeck==3"></image> -->
						</view>
					</view>
				</view>
			</view>
			<view class="seck_list" v-if="!show">
				<view class="seck_item" v-for="item in flashSaleList" @click="currSeck==3 ? '' : $navTo('/pages/product/product?id='+item.id)">
					<view class="seck_logo"><image :src="item.thumb"></image></view>
					<view class="seck_info">
						<view class="flex_box seck_tit">
							<image src="https://img.jinghushi.com/images/9/2024/12/K7jO6wmzll6V4Bn6ozBfwqWmFf4B4b.png" mode="widthFix"></image>
							<view class="clamp2">{{item.title}}</view>
						</view>
						<view class="flex_between seck_bt">
							<view class="flex_between">
								<view class="seck_bt_tit">最高补贴</view><view class="seck_bt_num">{{Number(item.btrate)}}%</view>
							</view>
							<view class="seck_time flex_between">
								<!-- <image src="https://img.jinghushi.com/images/9/2024/11/QGyNUFPnLeGngN11be41EkgXnF4NJB.png"></image> -->
								<image src="https://img.jinghushi.com/images/9/2024/12/qPX9T9mEewbUgzzEpUYghExEXDe0mb.png"></image>
								<view class="seack_day" v-if="currSeck==3">距开始</view><view class="seack_day" v-else>距结束</view>
								<view class="seack_num" v-if="currSeck==2">{{day(item.times)}}</view>
								<view class="seack_num" v-else>{{hour(item.times)}}</view>
								<view class="seack_day" v-if="currSeck==2">天</view>
								<view class="seack_day" v-else>小时</view>
								<!-- <uni-countdown v-if="currSeck==2" color="#A222E9" splitorColor="#A222E9" :font-size="13" :show-minute="false" :show-hour="false" :show-day="true" :day="day(item.times)" :hour="hour(item.times)" :minute="minute(item.times)" :second="second(item.times)" /> -->
								<!-- <uni-countdown v-else color="#A222E9" splitorColor="#A222E9" :font-size="13" :show-hour="true" :show-day="false" :day="day(item.times)" :hour="hour(item.times)" :minute="minute(item.times)" :second="second(item.times)" /> -->
							</view>
						</view>
						<view class="flex_between seck_price">
							<view class="flex_align_center">
								<view class="seck_new">
									<text class="pub_small">￥</text>{{item.agentprice}}
									<text v-if="item.hasoption==1" class="pub_small">起</text>
								</view>
								<view class="pub_old">￥{{item.productprice}}</view>
							</view>
							<view class="seck_qiang flex_align_center">
								<!-- <image src="https://img.jinghushi.com/images/9/2024/11/q4fwq4EfwweM01Y3IszLmFca40s5Ee.png"></image> -->
								<view v-if="currSeck==3">即将开售</view>
								<view v-if="currSeck!=3&&item.total!=0">立即抢购</view>
								<view v-if="currSeck!=3&&item.total==0">已抢光</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="brand_list" v-if="show">
				<view class="item" v-for="item in goodsList">
					<view class="l_head">
						<view class="l_left">
							<image :src="item.thumb"></image>
							<view class="clamp"><text>{{item.name}}</text></view>
						</view>
						<view class="l_btn">
							<view class="l_enter" @click="$navTo('/pages/goodlist/goodlist?brandid='+item.brandid)">进入会场</view>
						</view>
					</view>
					<scroll-view scroll-x="true" class="l_list">
						<view class="i_item" v-for="ite in item.goods" @click="$navTo('/pages/product/product?id='+ite.id)">
							<view class="i_flex">
								<image :src="ite.thumb"></image>
								<view class="clamp">{{ite.title}}</view>
								<view class="i_price">
									<view class="p_new"><text class="small">￥</text>{{Number(ite.agentprice)}}</view>
								</view>
								<view class="i_price">
									<view class="p_old">￥{{ite.productprice}}</view>
								</view>
							</view>
						</view>
						<view class="i_item" @click="$navTo('/pages/goodlist/goodlist?brandid='+item.brandid)">
							<view class="i_flex">
								<image src="https://img.jinghushi.com/images/9/2024/11/G0MddESaZDdAEERR00YuEse1Fb2pCC.jpg" mode="widthFix"></image>
							</view>
						</view>
					</scroll-view>
					<!-- <view class="l_list line_list">
						<view class="i_item" v-for="(ite,index) in item.goods" @click="$navTo('/pages/product/product?id='+ite.id)">
							<image :src="ite.thumb"></image>
							<view class="clamp">{{ite.title}}</view>
							<view class="i_price">
								<view class="p_new"><text class="small">￥</text>{{ite.agentprice}}</view>
								<view class="p_old">￥{{ite.productprice}}</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="like_goods" v-if="!show">
				<image class="like_logo" src="https://img.jinghushi.com/images/9/2024/11/GsysyP9jSKSxss3p522axz3y3pWx9z.png"></image>
				<liu-waterfall :bgColor="'#FBF8FE'" :dataList.sync="guessGoods" :column="2" @click="wateClick"></liu-waterfall>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" ></image>
				<text v-if="isempty">没有更多了~</text>
			</view>
		</view>
		<view class="no_login" v-if="!isLogin">
			<view>终于等到你! 快来享受低价消费吧~</view>
			<view class="no_btn" @click="$navTo('/pages/public/login?mid='+mid)">马上登录</view>
		</view>
		<view class="no_login" v-if="!isInfo">
			<view>完善信息，可享受更多折扣哦！</view>
			<view class="no_btn" @click="$navTo('/pages/individualism/user')">去完善</view>
		</view>
		<view v-if="!isDesktopCut" class="desktop_tip">
			<view class="up">▲</view>
			<image src="/static/close.png" @click="closeTip" mode="widthFix"></image>
			<text class="title">添加到手机桌面，使用多米街更便利</text>
			<view class="add" @click="">添加</view>
		</view>
	</view>
</template>

<script>
	import Jswiper from '@/components-home/pages/Jswiper.vue'
	import category from "@/home_page/components/category.vue"
	import Jsale from "@/components-home/pages/Jsale.vue"
	import shopList from "@/home_page/components/shop_list.vue"
	export default {
		components: {
			Jswiper,category,Jsale,shopList
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				currentId: 0,
				currentIndex: 0,
				cateList: [],
				goodsList: [],
				page:0,
				isFixed: false,
				info: {
					banner: [],
				},
				meunList: [],
				keywords: '',
				mid: 0,
				isLogin: true,
				isInfo: true,
				isDesktopCut: false,
				libaoList: [],
				notice: [],
				navBgColor: '#FBF8FE',
				fixBg:'',
				scrollLeft: 0,
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				saleBannerFu: [],//组合图幅图
				show: false,
				currSeck: 2,
				flashSaleList: [],
				guessGoods: []
			};
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				this.isLogin = false;
			}else{
				this.isLogin = true;
				this.getUserInfo();
			}
		},
		onPageScroll() {
			let query = uni.createSelectorQuery().in(this);
			query.select('#page_wp').boundingClientRect(data => {
				this.isFixed = data.top <= 0 ? true : false;
				if(this.isFixed){
					this.fixBg = this.navBgColor;
				}else{
					this.fixBg = '';
				}
			}).exec();
		},
		async onLoad(options){
		// onLoad(options){
		// onLoad(options){
			if(options.mid){
				this.mid = options.mid;
			}
			if (options.scene) {
				this.mid = options.scene;
			}
			uni.setStorageSync('mid', this.mid);
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
			this.getSeckill();//秒杀
			this.getInfo();//营销版块
			this.getNotice();//通知
			this.getLibao();
			// this.getCate();
			this.getMenu();
			this.isDesktopCut = uni.getStorageSync('isDesktopCut');
			// 猜你喜欢
			this.getGuessGoods();
			// this.getList();
			// await this.$onLaunched;
			setTimeout(()=>{
				this.closeTip();
			},4000)
		},
		onReachBottom(){
			// 	this.getList();
			this.getGuessGoods();
		},
		methods: {
			wateClick(data) {
				this.$navTo('/pages/product/product?id='+data.id)
			},
			changeSeck(id){
				if(this.currSeck==id) return;
				this.currSeck = id;
				this.flashSaleList = [];
				this.getSeckill();
				this.page = 0;
				this.guessGoods = [];
				this.getGuessGoods();
			},
			getSeckill(){
				this.$axios('home/getCurSkill', 'POST', 'shop',{
					type: this.currSeck
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.flashSaleList = res.data.data.goodsList0;
					}
				})
			},
			getGuessGoods(){
				this.page++;
				this.isloading = true;
				this.isempty = false;
				this.$axios('home/guessgoods', 'POST', 'shop',{
					page: this.page
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.guessGoods = [...this.guessGoods,...res.data.data];
						this.isempty = res.data.data.length <= 0;
					}
				})
			},
			second(v) {
				return Math.trunc(v % 60);
			},
			minute(v) {
				return Math.trunc(v / 60 % 60);
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
			day(v) {
				return Math.trunc(v / 60 / 60 / 24);
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.c_tag_list').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
					console.log(this.contentScrollW)
				}).exec();
				query.selectAll('.c_tag').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.cateList[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.cateList[i].width = data[i].width
					}
				}).exec()
			},
			changeNavBgColor(e){
				this.navBgColor = this.info.banner[e.detail.current].bgcolor;
			},
			getNotice() {
				this.$axios('center/notice', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						this.notice = res.data.data.join(' ');
					}
				})
			},
			closeTip(){
				uni.setStorageSync('isDesktopCut', true);
				this.isDesktopCut = true;
			},
			getUserInfo(){
				this.$axios('Center/main', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						this.$store.commit('uplevel', res.data.data.levelname);
						uni.setStorageSync('level',res.data.data.levelname);
						if (res.data.data.isopenavatar){ 
							this.isInfo = false; 
						}else{
							this.isInfo = true;
						}
					}
				})
			},
			getToken(){
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.isLogin = true;
								this.getUserInfo();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				    scopes: 'auth_base',
				    success: res => {
						this.$axios('login/autologinAliPay','POST','member',{
							mid: this.mid,
							code: res.authCode
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.isLogin = true;
								this.getUserInfo();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
			},
			getLibao(){
				this.$axios('home/vipgoodslist','POST','shop').then(res=>{
					if(res.data.code == 200){
						this.libaoList = res.data.data.list;
					}
				})
			},
			// 带图标分类
			getMenu() {
				this.$axios('home/shopcalss', 'POST', 'shop').then((res => {
					if (res.data.code == 200) {
						this.meunList = res.data.data;
					}
				}))
			},
			// banner
			getInfo() {
				this.$axios('home/main', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						if(this.info.banner.length>0) this.navBgColor = this.info.banner[0].bgcolor;
						if(this.info.saleBanner.length>0){
							this.info.saleBanner.forEach((item,index)=>{
								if(item.mtype==1&&item.parentid!=0){
									this.saleBannerFu.push(item);
								}
							})
						}
					}
				})
			},
			// 切换分类
			changebigCate(id,index){
				if(this.currentId == id) return;
				this.currentIndex = index;
				this.currentId = id;
				this.page = 0;
				this.goodsList = [];
				this.keywords = '';
				this.curIndex = index;
				this.scrollLeft = this.cateList[index].left - this.contentScrollW / 2 + this.cateList[index].width / 2;
				this.getList();
			},
			// 获取分类列表
			getCate(){
				this.$axios('Util/categorynew', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.cateList = res.data.data.category;
						this.currentId = this.cateList[0].id;
						setTimeout(()=>{
							// 获取标题区域宽度，和每个子元素节点的宽度
							this.getScrollW()
						},1000)
						this.getList();
					}
				})
			},
			// 商品列表
			getList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('home/parkList', 'POST', 'shop', {
					id: this.currentId,
					page: this.page,
					// brandid: this.currentId,
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.goodsList = [...this.goodsList, ...data];
						this.isempty = data.length <= 0;
						// 商品滑动到最底部，自动切换下一个分类
						if(data.length<=0){
							if(this.currentIndex<=this.cateList.length){
								this.currentIndex = this.currentIndex+1;
								this.currentId = this.cateList[this.currentIndex].id;
								this.page = 0;
								this.keywords = '';
								this.curIndex = this.currentIndex+1;;
								this.scrollLeft = this.cateList[this.curIndex-1].left - this.contentScrollW / 2 + this.cateList[this.curIndex-1].width / 2;
								this.getList();
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
	}
	.Jc_swiper_wp {
		position: relative;
	}
	
	.Jc_swiper {
		height: 256rpx;
	}
	.Jc_swiper_image {
		width: 100%;
		height: 100% !important;
		border-radius: 12rpx;
		will-change: transform;
	}
	
	.fill{
		position: relative;
		padding-top: calc(var(--status-bar-height) + 24rpx);
		
		.mall_swiper{
			height: 700rpx;
			.bg{
				width: 100%;
				height: 100%;
			}
		}
		.f_position{
			// position: absolute;
			// top: calc(var(--status-bar-height) + 22rpx);
			// top: 20rpx;
			text-align: center;
			width: 100%;
			padding: 20rpx 20rpx 10rpx;
			.f_tit{
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			.search{
				// width: 492rpx;
				width: 210rpx;
				left: 0;
				margin-bottom: 20rpx;
				transition: all 0.5s; 
				border: 4rpx solid #fff;
				border-radius: 60rpx;
				height: 60rpx;
				padding: 0 24rpx;
				margin-right: 10rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
				.s_tit{
					color: #fff;
					font-size: 26rpx;
				}
				// padding: 22rpx 0 22rpx;
				.uni-searchbar{
					padding: 0!important;
					border: 4rpx solid #fff;
					border-radius: 42rpx;
				}
				.uni-searchbar__box{
					justify-content: flex-start;
				}
				.uni-searchbar__box-search-input{
					text-align: left;
				}
				.searchInput{
					background: #fff;
					color: #999;
					height: 60rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: center;
					text{
						margin-left: 12rpx;
					}
				}
			}
			.search_fixed{
				position: fixed;
				top: calc(var(--status-bar-height) + 30rpx);
				z-index: 999;
				padding: 0 20rpx;
				// padding-top: calc(var(--status-bar-height) + 30rpx);
				background: #F0E1FF;
				margin: 0 20rpx;
				width: 360rpx;
				justify-content: center;
				image{
					margin-right: 10rpx;
				}
			}
		}
	}
	.d_content{
		background: #FBF8FE;
		padding: 10rpx 20rpx 0;
		position: relative;
		// margin-top: -40rpx;
		padding-bottom: 60rpx;
		// border-top-left-radius: 24rpx;
		// border-top-right-radius: 24rpx;
	}
	.notice_bar {
		margin-bottom: 20rpx;
		position: relative;
		// border-radius: 12rpx;
		overflow: hidden;
		width: 300rpx;
		// background: #f0e0fd;
		height: 60rpx;
		line-height: 60rpx;
		border: 4rpx solid #fff;
		border-radius: 60rpx;
		image{
			width: 40rpx;
			position: absolute;
			left: 20rpx;
			top: 4rpx;
			bottom: 0;
			margin: auto;
		}
		.uni-noticebar{
			padding: 8rpx 0!important;
		}
		.no_bar{
			// width: 100%;
			width: calc(100% - 62rpx);
			float: right;
		}
	}
	.libao{
		// padding-top: 20rpx;
		color: #333;
		.libao_top{
			display: flex;
			align-items: center;
			// justify-content: space-between;
			// font-weight: 600;
			font-size: 36rpx;
			margin: 10rpx 0 4rpx;
			image{
				width: 180rpx;
				margin-right: 20rpx;
			}
			.libao_tip{
				padding: 0 20rpx;
				height: 42rpx;
				line-height: 42rpx;
				// background: #7E00E8;
				// box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255,255,255,0.5);
				// border-radius: 22rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, rgba(128, 35, 214, 1) 0%, rgba(219, 71, 253, 1) 100%);
				border-radius: 60rpx 60rpx 60rpx 0rpx;
			}
		}
		.libao_list{
			white-space: nowrap;
			// margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.libao_item{
				// width: 31.5%;
				width: 199rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				// padding: 10rpx;
				text-align: center;
				margin-top: 16rpx;
				margin-right: 20rpx;
				display: inline-block;
				// box-shadow: 2rpx 2rpx 24rpx 4rpx rgba(0, 0, 0, 0.1);
				image{
					width: 100%;
					height: 179rpx;
					border-radius: 10rpx 10rpx 0 0;
				}
				.clamp{
					font-size: 20rpx;
					line-height: 30rpx;
				}
			}
			&::after{
				display: block;
				content: "";
				width: 31.5%;
			}
		}
	}
	.super{
		margin: 14rpx 0 0;
		flex-wrap: wrap;
		image{
			border-radius: 12rpx;
			// margin-bottom: 10rpx;
		}
		.super_item4{
			width: 100%;
			height: 130rpx;
			margin-top: 1%;
		}
		.super_item3{
			width: 32%;
			height: 110rpx;
			margin-top: 1%;
		}
		.super_item2{
			width: 49%;
			height: 140rpx;
			margin-top: 1%;
		}
		.super_item1{
			width: 24%;
			height: 80rpx;
			margin-top: 1%;
		}
		.super_item_main{
			width: 49%;
			height: 428rpx;
		}
		.super_item_fu_2{
			width: 49%;
			height: 208rpx;
		}
		.super_item_fu_3{
			width: 49%;
			height: 140rpx;
		}
		.d_activity{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.d_a_big{
				width: 50%;
				height: 406rpx;
			}
			.d_a_little{
				height: 406rpx;
				width: 50%;
				overflow: hidden;
				// display: flex;
				// justify-content: space-between;
				// flex-direction: column;
				image{
					width: 98%;
					// margin-bottom: 0;
				}
				.super_item_fu4{
					height: 49%;
					width: 48%;
					margin-left: 2%;
				}
				.super_item_fu3{
					height: 49%;
					width: 48%;
					margin-left: 2%;
				}
				.super_item_fu2{
					height: 49%;
					margin-left: 2%;
				}
				.super_item_fu1{
					height: 100%;
					margin-left: 2%;
				}
			}
		}
	}
	.pack{
		background: white;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 10rpx 10rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.pack_item{
			width: 20%;
			text-align: center;
			word-wrap: nowrap;
			margin-top: 10rpx;
			.pack_img{
				height: 80rpx;
				image{
					height: 100%;
				}
			}
			.pack_title{
				font-size: 24rpx;
			}
		}
	}
	#page_wp{
		margin-top: 20rpx;
		// margin-left: -20rpx;
		// margin-right: -20rpx;
	}
	.cate{
		// height: 62rpx;
		margin-bottom: 14rpx;
		.c_tag_list{
			white-space: nowrap;
			// padding: 10rpx 0 30rpx;
			height: 100%;
			.c_tag{
				display: inline-block;
				color: #999999;
				margin-right: 30rpx;
				font-size: 32rpx;
				position: relative;
				height: 100%;
				.c_tag_img{
					width: 80rpx;
					height: 80rpx;
					border: 2rpx solid #fff;
					background: #fff;
					border-radius: 50%;
					margin: 0 auto;
					image{
						width: 100%;
					}
				}
			}
			.c_tag_active{
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				// &::after{
				// 	content: '';
				// 	position: absolute;
				// 	left: 50%;
				// 	bottom: 2upx;
				// 	transform: translateX(-50%);
				// 	width: 100%;
				// 	height: 8rpx;
				// 	background: linear-gradient( 90deg, #BB2FF2 0%, #8615E1 100%);
				// 	border-radius: 4rpx;
				// 	opacity: .8;
				// }
				// image{
				// 	width: 40rpx;
				// 	position: absolute;
				// 	bottom: 0;
				// 	height: 14rpx;
				// 	left: 0;
				// 	right: 0;
				// 	margin: auto;
				// }
			}
		}
	}
	.cate_seckill{
		// margin-top: -70rpx;
		background: #fff;
		box-shadow: 0rpx 7.5rpx 30rpx  rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		.c_tag_list{
			display: flex;
			justify-content: space-around;
			padding: 26rpx 0;
			.c_tag{
				color: #fff;
				margin-right: 0;
				width: 33%;
				justify-content: center;
				// line-height: 62rpx;
				display: flex;
				color: #adadad;
				align-items: center;
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}
			.c_tag_active{
				font-weight: bold;
				// background: #fff;
				// color: #A222E9;
				color: #333;
				&::after{
					content: '';
					position: absolute;
					left: 58%;
					bottom: -14rpx;
					transform: translateX(-50%);
					width: 50rpx;
					height: 6rpx;
					background: linear-gradient(90deg, rgba(130, 37, 216, 1) 0%, rgba(219, 71, 253, 1) 100%);
					border-radius: 6rpx;
					opacity: .8;
				}
			}
		}
	}
	.screen{
		display: flex;
		margin-bottom: 20rpx;
		.screen_item{
			width: 122rpx;
			line-height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #999999;
			margin-right: 20rpx;
			text-align: center;
		}
		.screen_item_active{
			color: #8616E1;
		}
	}
	.nav_pos {
		background: #f8f8fe;
		position: fixed;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 106rpx);
		width: 100%;
		z-index: 900;
		// margin-left: -20rpx;
		margin-right: -20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: auto;
		left: 0;
		margin-top: 0;
		.c_tag{
			color: #fff!important;
		}
		.c_tag_list{
			// padding-bottom: 20rpx!important;
			// padding: 16rpx 0 16rpx;
			padding: 12rpx 0 28rpx;
			.c_tag_active {
				image{
					bottom: -16rpx;
				}
			}
		}
	}
	.seck_list{
		.seck_item{
			display: flex;
			// background: #fff;
			padding: 10rpx;
			margin-bottom: 16rpx;
			border-radius: 14rpx;
			.seck_logo{
				width: 236rpx;
				height: 236rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
				}
			}
			.seck_info{
				width: calc(100% - 220rpx);
				padding-left: 20rpx;
				.seck_tit{
					image{
						width: 28rpx;
						margin-top: 4rpx;
					}
					.clamp2{
						width: calc(100% - 28rpx);
						padding-left: 4rpx;
					}
				}
				.seck_bt{
					font-size: 22rpx;
					// color: #FFFFFF;
					// width: 180rpx;
					line-height: 38rpx;
					border-radius: 8rpx;
					margin: 24rpx 0;
					// justify-content: flex-start;
					overflow: hidden;
					.seck_bt_tit{
						text-align: center;
						background: #f0e1ff;
						width: 110rpx;
						white-space: nowrap;
						color: #f506a7;
					}
					.seck_bt_num{
						color: #f1cffc;
						padding: 0 6rpx;
						background: #c638f5;
						border-top-right-radius: 8rpx;
						border-bottom-right-radius: 8rpx;
					}
				}
				.seck_price{
					width: 100%;
					height: 60rpx;
					// background: linear-gradient( 90deg, #F0E1FF 0%, #fff 100%);
					background: linear-gradient( to right, #8624d9 0%, #c237f3 100%);
					border-radius: 12rpx;
					padding-left: 10rpx;
					margin-top: 8rpx;
					.seck_new{
						// color: #AF141D;
						color: #fff;
						// font-weight: bold;
						font-size: 36rpx;
						margin-right: 10rpx;
					}
					.pub_old{
						color: #dcb3f5;
						padding-top: 8rpx;
					}
					.seck_qiang{
						color: #fb66bc;
						font-weight: bold;
						background: #f0e1ff;
						border-radius: 0 10rpx 10rpx 16rpx;
						padding: 0 24rpx;
						height: 100%;
						// image{
						// 	width: 48rpx;
						// 	height: 48rpx;
						// }
					}
				}
				.seck_time{
					// color: #A222E9;
					font-size: 24rpx;
					image{
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
					.seck_btn{
						width: 130rpx;
						line-height: 50rpx;
						background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
						border-radius: 26rpx;
						color: #FFFFFF;
						justify-content: center;
						font-size: 24rpx;
					}
					.seack_day{
						color: #e26cfb;
					}
					.seack_num{
						color: #822fd6;
						font-weight: bold;
						font-size: 32rpx;
						margin: 0 6rpx;
						margin-top: -4rpx;
					}
				}
			}
		}
	}
	.brand_list{
		.item{
			padding: 16rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
			.l_head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				.l_left{
					display: flex;
					align-items: center;
					width: calc(100% - 290rpx);
					image{
						width: 96rpx;
						height: 96rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
						border: 1rpx solid #eee;
					}
					.clamp{
						font-weight: 600;
						width: calc(100% - 96rpx);
					}
				}
				.l_btn{
					display: flex;
					align-items: center;
					view{
						border-radius: 26rpx;
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: 600;
					}
					.l_enter{
						background: #F0E1FF;
						color: #8615E1;
						// margin-right: 20rpx;
						width: 154rpx;
					}
					.l_share{
						background: #8615E1;
						color: #FFFFFF;
						width: 112rpx;
					}
				}
			}
			.l_list{
				white-space: nowrap;
				margin-top: 20rpx;
				.i_item{
					margin-right: 14rpx;
					width: 190rpx;
					display: inline-block;
					.i_flex{
						display: flex;
						flex-direction: column;
					}
					image{
						width: 100%;
						height: 190rpx;
						border-radius: 12rpx;
					}
					.clamp{
						font-size: 28rpx;
						// font-weight: 600;
						margin-bottom: 4rpx;
					}
					.i_price{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						.p_new{
							font-size: 30rpx;
							color: #AF141D;
							font-weight: bold;
							margin-right: 6rpx;
							.small{
								font-size: 20rpx;
							}
						}
						.p_old{
							color: #999999;
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
					.vip_price{
						color: #AF141D;
						font-size: 26rpx;
						font-weight: bold;
						.small{
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}
			}
			.line_list{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				justify-content: space-between;
				margin-bottom: -20rpx;
				.i_item{
					width: 210rpx;
					margin-bottom: 20rpx;
					margin-right: 0;
					image{
						height: 210rpx;
					}
				}
				&::after{
					display: block;
					content: '';
					width: 210rpx;
				}
			}
		}
	}
	.like_logo{
		width: 300rpx;
		height: 44rpx;
		margin: 40rpx auto 0;
		display: block;
	}
</style>
